<template>
	<div style="font-size: 14px; line-height: 30px">
		<el-form style="margin-bottom: 30px">
			<el-form-item label="协议名称：">
				<el-input v-model="form.name" placeholder="请输入协议名称"></el-input>
			</el-form-item>
			<el-form-item label="版本号：">
				<el-input v-model="form.version" placeholder="请输入协议版本号"></el-input>
			</el-form-item>
		</el-form>
		<my-editor :content="form.content" @handleClose="handleClose" @submit="submit"></my-editor>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onBeforeMount, ref, nextTick, watch } from 'vue';
import { addAgreement, addSiteAgreement } from '/@/api/api';
import myEditor from '/@/components/myEditor/index.vue';

const form = ref({});
const loading = ref(false);
const props = defineProps({
	// 列表内容
	data: {
		type: String,
		default: () => '',
	},
	role: {
		type: String,
		default: () => '',
	},
	dataType: {
		type: Number,
		default: () => 0,
	},
	platType: {
		type: Number,
		default: () => 0,
	},
});

watch(
	() => props.data,
	(val) => {
		form.value = JSON.parse(props.data);
		form.value.saasAgreementId = form.value.id;
		form.value.saasAgreementVersion = form.value.version;
		delete form.value.id;
	}
);

async function submit(valueHtml: any) {
	console.log('🚀 ~ file: agreementInput.vue:43 ~ submit ~ props.role:', props.role);

	if (props.role == 'admin') {
		let { code, data } = await addAgreement({
			...form.value,
			platType: props.platType,
			content: valueHtml,
			dataType: props.dataType,
		});
		if (code == 200) {
			ElMessage.success('操作成功');
			handleClose();
		}
	} else {
		let { code, data } = await addSiteAgreement({
			...form.value,
			content: valueHtml,
			platType: props.platType,
			dataType: props.dataType,
		});
		if (code == 200) {
			ElMessage.success('操作成功');
			handleClose();
		}
	}
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}
</style>
